CSS : Pseudo-classes pour les liens

La pseudo-classe :hover est activée lorsque l'utilisateur survole un lien avec la souris. Cela permet de créer des effets visuels interactifs lorsqu'un lien est survolé.

Exemple :

/* Changement de couleur lorsque le lien est survolé */
a:hover {
    color: red;
    text-decoration: underline;
}
Copy

Dans cet exemple, lorsque l'utilisateur survole un lien, le texte du lien devient rouge et un soulignement est ajouté.

La pseudo-classe :focus est activée lorsque le lien est sélectionné avec le clavier (par exemple, en utilisant la touche Tab pour naviguer à travers les liens). Cela améliore l'accessibilité en indiquant clairement quel lien est actuellement sélectionné.

Exemple :

/* Style pour les liens lorsqu'ils sont en focus au clavier */
a:focus {
    outline: 2px solid blue;
}
Copy

Dans cet exemple, lorsque l'utilisateur sélectionne un lien avec le clavier, une bordure bleue de 2 pixels est affichée autour du lien pour indiquer qu'il est en focus.

La pseudo-classe :active est activée lorsque l'utilisateur clique sur un lien. Elle est souvent utilisée pour créer un effet visuel momentané lorsqu'un élément est en cours de clic.

Exemple :

/* Style pour les liens lorsqu'ils sont activés (clic) */
a:active {
    color: orange;
}
Copy

Dans cet exemple, le texte du lien devient orange lorsque l'utilisateur clique dessus.

La pseudo-classe :visited permet de cibler les liens déjà visités par l'utilisateur. Cela peut être utile pour afficher différemment les liens déjà consultés par rapport aux liens non visités.

Exemple :

/* Style pour les liens déjà visités */
a:visited {
    color: purple;
}
Copy

Dans cet exemple, les liens visités affichent une couleur violette.

La pseudo-classe :nth-child() permet de cibler un lien en fonction de sa position parmi les enfants de son parent. Elle est souvent utilisée pour créer des mises en page dynamiques.

Exemple :

/* Style pour chaque deuxième lien dans une liste */
ul a:nth-child(2n) {
    background-color: #f0f0f0;
}
Copy

Dans cet exemple, chaque deuxième lien dans une liste sera coloré en gris clair.

La pseudo-classe :not() permet d'exclure des liens spécifiques de la sélection. Elle est utile lorsque vous souhaitez styliser tous les liens, sauf certains.

Exemple :

/* Style pour tous les liens, sauf ceux avec la classe "external" */
a:not(.external) {
    text-decoration: underline;
}
Copy

Dans cet exemple, tous les liens, à l'exception de ceux avec la classe "external," auront un soulignement.

La pseudo-classe :first-child cible le premier enfant d'un élément parent. Vous pouvez l'utiliser pour appliquer un style spécifique au premier lien parmi les enfants d'un conteneur.

Exemple :

/* Style pour le premier lien parmi les enfants d'une liste */
ul a:first-child {
    font-weight: bold;
}
Copy

Dans cet exemple, le premier lien à l'intérieur d'une liste sera mis en gras.

La pseudo-classe :last-child cible le dernier enfant d'un élément parent. Vous pouvez l'utiliser pour appliquer un style spécifique au dernier lien parmi les enfants d'un conteneur.

Exemple :

/* Style pour le dernier lien parmi les enfants d'une liste */
ul a:last-child {
    margin-bottom: 0;
}
Copy

Dans cet exemple, le dernier lien à l'intérieur d'une liste n'aura pas de marge inférieure.

Ici, nous utilisons toutes ces pseudos classes sur des liens, car ce sont en général les éléments interactifs les plus basique avec lesquels on joue. En effet, vous pourriez utiliser certaines de ces pseudos classes sur d'autres éléments, mais il se peut que ça soit perturbant pour vos utilisateurs. Pour le coup, je ne suis pas WebDesigner donc je vous laisse un peu bidouiller avec tout ça sur d'autres éléments, vous pouvez vous amuser à zoomer sur un <p> au survol par exemple !

La pseudo-classe :empty permet de cibler des éléments HTML qui sont complètement vides, c'est-à-dire ceux qui n'ont pas de contenu textuel ni d'enfants.

Exemple :

/* Style pour les liens vides */
a:empty {
    color: gray;
}
Copy

La pseudo-classe :target est utilisée pour cibler un élément spécifique qui est actuellement la cible d'un lien d'ancrage (ancre) dans l'URL. Elle est souvent utilisée pour créer des effets de mise en évidence pour les éléments ciblés.

Exemple :

/* Style pour l'élément avec l'ID correspondant à la cible de l'ancre actuelle */
#section2:target {
    background-color: yellow;
}
Copy

Ces pseudo-classes sont utilisées pour cibler des éléments de formulaire qui sont activés ou désactivés.

Exemple :

/* Style pour les liens désactivés */
a:disabled {
    color: gray;
}
Copy